<template>
	<div class="categoryPage" id="categoryPage">
		<div class="category_top">
			<HomeHeader />
			<!-- 游戏类型tab切换 -->
			<GameTypeTab :tabs="typeTabs" :activeId="activeType" :icon-base-url="settings.backend_upload"
				ref="gameTypeTabRef" @tab-click="handleTabsChange"></GameTypeTab>
		</div>
		<div class="category_main">
			<swiper
				v-if="typeTabs.length"
				ref="categoryPageSwiper"
				direction="horizontal"
				:autoplay="false"
				:autoHeight="true"
				:loop="false"
				:disableOnIntercation="false"
				:touchStartPreventDefault="false"
				slidesPerView="auto"
				:centeredSlides="true"
				class="category_page_swiper"
				@swiper="onSwiperInit"
				@slideChange="handleSwiperChange"
			>
				<swiper-slide v-for="gameType in typeTabs" :key="gameType.id">
					<div class="category_container" :id="`pane-box${gameType.id}`" @scroll="handleScroll(gameType.id)">
						<div class="platform-wrap">
							<div class="platform-item" :class="[
								{
									active: activePlatform[gameType.id] === item,
									isHotBlock: platformData[item]?.isHotBlock,
								},
							]" v-for="item in gameType.platforms" :key="item" @click="changeGamePlatform(gameType.id, item)">
								<ImgText v-if="platformData[item]?.isHotBlock"
									:src="getGameTypeIcon(platformData[item]?.id)" class="platform_icon"
									:text="unserialize(platformData[item]?.name, true)" alt="" />
								<ImgText v-else
									:src="`${joinURL(settings.backend_upload, platformData[item]?.logo_h5)}`"
									class="platform_icon"
									:class="[{ small: unserialize(platformData[item]?.name, true).length >= 8 }]"
									:text="unserialize(platformData[item]?.name, true)" alt="" />
							</div>
						</div>
						<!-- <div v-if="imgLoading" class="game_loading_cover">
							<LoadingCircle />
						</div> -->
						<div class="game_list"   v-if="getPlatformData(gameType.id)">
							<template
								v-if="[GameType.Slot, GameType.Fishing, GameType.Porker, 0].includes(gameType.id)">
								<template v-if="getPlatformData(gameType.id)?.three_game_kind?.length">
									<template
										v-if="activeType === gameType.id && activePlatform[gameType.id] === currentChangeShowPlatform && visibleItems.length">
										<div class="game_item" v-for="item in visibleItems" :key="item.id">
											<GameItem :key="item.id" @ready="endLoading" :item="item" platformLogo>
											</GameItem>
										</div>
									</template>
									<template v-else>
										<div class="game_item"
											v-for="item in getPlatformData(gameType.id)?.three_game_kind"
											:key="item.id">
											<GameItem :key="item.id" @ready="endLoading" :item="item" platformLogo>
											</GameItem>
										</div>
									</template>

									<!-- <UseVirtualList
												:list="chunkedVirtualListData(getPlatformData(gameType.id)?.three_game_kind)"
												:options="virtualListOptions"
												class="virtualList"
											>
												<template #default="{ data }">
													<div class="row">
														<div v-for="(item) in data.items" :key="`${data.index}-${item.id}`" class="game_item">
															<GameItem :item="item" platformLogo />
														</div>
													</div>
												</template>
											</UseVirtualList> -->
								</template>
								<div v-else class="game_empty">
									<EmptyState :text="t('home_no_type_game')" :tip="' '" />
								</div>
							</template>
							<template v-else>
								<div class="game_platform" @click.stop="onPlayGame(getPlatformData(gameType.id))">
									<div class="item_bg">
										<div>
											<img src="@/assets/img-default.svg" :key="getPlatformData(gameType.id).logo_h5" :data-ready="endLoading"
												v-thumb="joinURL(settings.backend_upload, getPlatformData(gameType.id).logo_h5)"
												class="logo_h5" />
											<span>{{ unserialize(getPlatformData(gameType.id).name, false) }}</span>
										</div>
										<img src="@/assets/img-default.svg" v-if="[GameType.Live, GameType.Sports, GameType.Lottery].includes(gameType.id)"
											:key="getPlatformData(gameType.id).picture_category_list"
											class="platform_logo" :data-ready="endLoading"
											v-thumb="joinURL(settings.backend_upload, getPlatformData(gameType.id).picture_category_list)" />
										<!-- 收藏 -->
										<iconpark-icon v-if="isLocalLoggedIn && !getPlatformData(gameType.id).has_next"
											class="fav"
											:name="allCollected.includes(getPlatformData(gameType.id).id) ? 'shoucang-sel' : 'shoucang-def'"
											size="1rem"
											@click.stop="reqCollect(getPlatformData(gameType.id), allCollected)"></iconpark-icon>
										<!-- 热门 -->
										<!-- <div class="game_hot" v-if="getPlatformData(gameType.id).is_hot == 1 || true">
											<iconpark-icon name="hot" size=".8rem"></iconpark-icon>
											<span>HOT</span>
										</div> -->
									</div>
								</div>
							</template>
						</div>
					</div>
				</swiper-slide>
			</swiper>
		</div>
	</div>
</template>
<script setup lang="ts">
// @ts-nocheck
import { ref, watch, onMounted, onBeforeUnmount, nextTick, onActivated, onDeactivated, computed } from 'vue';
import { storeToRefs } from 'pinia';
import pinia from '@/store/index';
import { Page } from '@/store/page';
import { User } from '@/store/user';
import HomeHeader from '@/views/home/components/homeHeader.vue';
import GameTypeTab from '@/components/GameTypeTab.vue';
// import PullRefresh from '@/components/PullRefresh.vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { isLocalLoggedIn } from '@/utils/commonVar';
import { showToast } from "@nutui/nutui";
import { GameType } from '@/enums/gameEnum.ts';
import EmptyState from '@/views/searchGames/components/EmptyState.vue';
import { useRoute, useRouter } from 'vue-router';
import { repMyGamesData, reqCollect } from '@/utils/useNetMethods';
import { unserialize, onPlayGame } from '@/utils/useStoreMethods';
import usePlatformImageLoader from '@/hooks/usePlatformImageLoader';
import OverLoading from '@/components/Loading.vue';
import ImgText from '@/components/ImgText.vue';
import LoadingCircle from '@/components/LoadingCircle.vue';
import { joinURL, enablePullToRefresh, disablePullToRefresh } from '@/utils/publicMethods'
// import { UseVirtualList } from '@vueuse/components';
import { useI18n } from "vue-i18n";
import 'swiper/css';
import 'swiper/css/pagination'; // 轮播图底面的小圆点

const route = useRoute();
const router = useRouter();
const { t } = useI18n();
const { settings, homeGameData } = storeToRefs(Page(pinia));
const { allCollected } = storeToRefs(User(pinia));

const routeQuery = route.query;
// 初始化默认type
const initialType = routeQuery?.type || 0;
// 初始化默认平台
const initialPlatform = ref(routeQuery?.platformId ? Number(routeQuery?.platformId) : 0);
const SWIPER_SPEED = 500; // 滑动速度
const activeType = ref(Number(initialType)); // 当前选中类型tab
const activePlatform: any = ref(null); // 当前选中平台
const gameTypeTabRef = ref(null);
const typeTabs: any = ref([]);
const platformData: any = ref({});
// const refresh = ref(false);
const currentChangeShowPlatform = ref(''); // 当前切换显示的平台

const gameImages = ref({});
const { loading, progress, errorPlatforms, initFromRoute } = usePlatformImageLoader(gameImages, activeType, activePlatform);


const imgLoading: any = ref(false)
const endLoading = () => {
	imgLoading.value = false
}

// const virtualListOptions = ref({
// 	itemHeight: 116, // 110px元素高度 + 6px下边距
// 	overscan: 3
// });

// const chunkedVirtualListData = (rawData) => {
//   const chunks = []
//   for (let i = 0; i < rawData.length; i += 3) {
//     chunks.push({
//       index: Math.floor(i / 3),
//       items: rawData.slice(i, i + 3)
//     })
//   }
//   return chunks
// }

const isValidType = (type: number) => {
	return typeTabs.value.some((t) => t.id === type);
};

const isValidPlatform = (type: number, platform: number) => {
	const platforms = typeTabs.value.find((t) => t.id === type)?.platforms || [];
	return platforms.some((p) => p.endsWith(`-${platform}`));
};

// 获取首个有效平台
const getFirstPlatform = (type: number) => {
	const firstPlatform = typeTabs.value.find((t) => t.id === type)?.platforms?.[0];
	return firstPlatform ? Number(firstPlatform.split('-')[1]) : 0;
};

// 补全url参数
const fixUrlParams = (url: string) => {
	if (!activePlatform.value) {
		return false
	}
	const _query = route.query;
	if (!_query.type || !_query.platformId) {
		router.replace({
			path: route.path,
			query: {
				type: activeType.value,
				platformId: activePlatform.value[activeType.value]?.split('-')?.[1],
			},
		});
	}
};

watch(
	() => homeGameData.value.length,
	(nv: any) => {
		if (nv > 1) {
			handleGamesData(homeGameData.value);	
		}
	}
);

watch(
	() => route.query,
	(newQuery) => {
		const type = Number(newQuery.type);
		const platformId = Number(newQuery.platformId);

		if (isValidType(type)) {
			const targetPlatform = `${type}-${isValidPlatform(type, platformId) ? platformId : getFirstPlatform(type)}`;

			activeType.value = type;
			activePlatform.value[type] = targetPlatform;
			initialPlatform.value = platformId;
			nextTick(() => {
				const index = getSwiperIndexByType(type);
				goToSlidePage(index, 0);
				gameTypeTabRef.value?.scrollToTab(type, 0);
			});
		}
	},
	{ immediate: true }
);

// 获取平台数据
const getPlatformData = (gameTypeId: string | number) => {
	return platformData.value[activePlatform.value[gameTypeId]];
};

// 根据typeid获取类型高亮图
const getGameTypeIcon = (typeid: string | number) => {
	const type = typeTabs.value.find((a: any) => a.id == typeid);
	return joinURL(settings.value.backend_upload, type?.icon_h5);
};

// 游戏大类切换
const loadedTabs = ref([])
const handleTabsChange = (val: any, speed = SWIPER_SPEED) => {
	if (!loadedTabs.value.includes(val.id)) {
		imgLoading.value = true
		loadedTabs.value.push(val.id)
	}
	const newType = val.id;
	const currentPlatform = activePlatform.value[newType];
	// 更新路由参数
	router.replace({
		path: route.path,
		query: {
			type: newType,
			platformId: currentPlatform ? currentPlatform.split('-')[1] : '',
		},
	});
	activeType.value = newType;
	activePlatform.value = {
		...activePlatform.value,
		[val.id]: val.platforms[0],
	};
	const index = getSwiperIndexByType(val.id);
	goToSlidePage(index, speed);
	// @ts-ignore
	gameTypeTabRef.value?.scrollToTab(val.id);
};

const goToSlidePage = (index: any, time = SWIPER_SPEED) => {
	if (swiperInstance.value) {
		// @ts-ignore
		swiperInstance.value?.slideTo(index, time); // 切换到特定页面
	}
};

const visibleItems = ref<any[]>([]); // 当前可见数据
const pendingItems = ref<any[]>([]); // 待加载数据
let loadTimer: ReturnType<typeof setTimeout> | null = null;

// 设置当前显示页
const setCurrentShowPageData = (typeId, activePlatform, chunkSize = 30, delay = 1200) => {
	// 清除之前的定时器
	if (loadTimer) clearTimeout(loadTimer);
	visibleItems.value = [];
	pendingItems.value = [];

	currentChangeShowPlatform.value = activePlatform;
	// 获取完整数据源
	const fullData = getPlatformData(typeId)?.three_game_kind || [];

	// 分批次处理（
	// visibleItems.value = fullData.slice(0, chunkSize);
	// pendingItems.value = fullData.slice(chunkSize);
	// loadTimer = setTimeout(() => {
	// 	visibleItems.value = [...visibleItems.value, ...pendingItems.value];
	// 	pendingItems.value = [];
	// }, 1800);

	// 创建数据块队列（每次加载chunkSize条）
	const dataChunks = [];
	for (let i = 0; i < fullData.length; i += chunkSize) {
		dataChunks.push(fullData.slice(i, i + chunkSize));
	}

	// 初始加载首屏数据
	if (dataChunks.length > 0) {
		visibleItems.value = dataChunks.shift() || [];
	}

	// 递归加载剩余数据块
	const loadNextChunk = () => {
		if (dataChunks.length > 0) {
			const nextChunk = dataChunks.shift();
			visibleItems.value = [...visibleItems.value, ...nextChunk];
			loadTimer = setTimeout(loadNextChunk, delay); // 延迟加载
		}
	};

	loadTimer = setTimeout(loadNextChunk, delay); // 启动首次延时加载
};

//切换游戏平
const handleSwiperChange = (swiper: any) => {
	if (gameTypeTabRef.value) {
		const tabData = typeTabs.value[swiper.activeIndex];
		activeType.value = tabData.id;
		gameTypeTabRef.value?.scrollToTab(tabData.id);
	}
}

// 切换游戏平台
const changeGamePlatform = (typeId, val: any) => {
	imgLoading.value = true
	visibleItems.value = [];
	pendingItems.value = [];

	const platformId = val.split('-')[1];
	// 更新路由参数
	router.replace({
		path: route.path,
		query: {
			type: typeId,
			platformId: platformId,
		},
	});

	activePlatform.value = {
		...activePlatform.value,
		[typeId]: val,
	};

	setCurrentShowPageData(activeType.value, val);
	const dom = document.getElementById(`pane-box${activeType.value}`);
	if (dom) {
		dom.scrollTo(0, 0);
	}
};

// 处理游戏数据
const handleGamesData = (val: any) => {
	imgLoading.value = true
	const _tabs = []; // 类型tab数据
	const _platform: any = {}; // 平台数据
	const _activePlatform: any = {}; // 个大类选中的平台
	for (let i = 0; i < val.length; i++) {
		const type = val[i];
		const typePlats = [];

		// 热门数据处理
		if (val[i].id === 0) {
			for (let j = 0; j < type.three_platform.length; j++) {
				// 热门数据处理
				const game = type.three_platform[j];
				const typeId = game.venue_id || game.three_game_kind_id;
				if (typeId) {
					// 把类型数据当成平台数据
					const plat = {
						id: typeId,
						isHotBlock: true,
						name: game.venue_name?.length ? game.venue_name : game.kind_name,
					};
					const platId = type.id + '-' + plat.id;
					if (!_platform[platId]) {
						// 追加平台数据
						typePlats.push(platId);
						_platform[platId] = {
							...plat,
							three_game_kind: [],
						};
					}
					_platform[platId].three_game_kind.push({
						...game,
						is_hot: 1
					});

					// 图片资源收集
					if (!gameImages.value[platId]) {
						gameImages.value[platId] = {
							imgs: [],
							loaded: false, // 先都设置为true,说不需要加载了,等后续稳定了,可以去掉这个加载逻辑
						};
					}
					gameImages.value[platId].imgs.push(joinURL(settings.value.backend_upload, game.picture_h5));
				}
			}
		} else {
			// 平台
			for (let j = 0; j < type.three_platform.length; j++) {
				const plat = type.three_platform[j];
				const subGames = plat?.three_game_kind?.[0]?.three_game || [];
				// platformId 有相同改成 typeId-platformId
				const platId = type.id + '-' + plat.id;

				// 如果是电子,棋牌,捕鱼,没有子游戏的话,默认一个游戏为当前平台游戏
				if ([GameType.Slot, GameType.Fishing, GameType.Porker].includes(type.id) && plat.has_next == 0) {
					// 需要加对应类型名字
					const name = {};
					Object.keys(plat.name).forEach((key) => {
						name[key] = plat.name[key] + ' ' + type?.name[key];
					})
					subGames.push({
						...plat,
						name
					});
				}
				typePlats.push(platId);

				const _platformInfo = {
					...plat,
					three_game_kind: subGames,
				}

				// 平台没有下级
				if (![GameType.Slot, GameType.Fishing, GameType.Porker].includes(type.id)) {
					_platformInfo.has_next = 0
				}
				_platform[platId] = _platformInfo;

				// 资源图片统计
				if (subGames.length && !gameImages.value[platId]) {
					gameImages.value[platId] = {
						imgs: [],
						loaded: false, // 先都设置为true,说不需要加载了,等后续稳定了,可以去掉这个加载逻辑
					};
					subGames.map((v) => {
						gameImages.value[platId].imgs.push(joinURL(settings.value.backend_upload, v.picture_h5));
					});
				}
			}
		}

		// 类型tab
		_tabs.push({
			icon_h5: type.id === 0 ? '/imgs/category/hot.png' : type.icon_h5,
			icon_h5_before: type.id === 0 ? '/imgs/category/hot_before.png' : type.icon_h5_before,
			id: type.id,
			name: type.name,
			kind_id: type.kind_id,
			sort: type.sort,
			platforms: typePlats,
		});
		_activePlatform[type.id] = typePlats[0];
	}
	// 热门分类排序
	if (_tabs[0]?.id === 0) {
		const indexMap = new Map();
		_tabs.forEach((v, index) => {
			indexMap.set(v.id, index);
		});
		_tabs[0].platforms = _tabs[0].platforms.sort((a: any, b: any) => {
			const numA = parseInt(a.split('-')[1]);
			const numB = parseInt(b.split('-')[1]);
			return indexMap.get(numA) - indexMap.get(numB);
		})
	}
	console.error('平台数据', _tabs)
	typeTabs.value = _tabs;
	// 左侧平台数据
	platformData.value = _platform;
	// 个大类选中的平台
	if (!activePlatform.value) {
		activePlatform.value = _activePlatform;
	}
	console.log('[分类初始化数据]:', {
		type: typeTabs.value,
		activePlatform: activePlatform.value,
		platformData: platformData.value,
	});

	// 设置默认类型页面
	if (activeType.value || activeType.value === 0) {
		if (initialPlatform.value) {
			activePlatform.value[activeType.value] = `${activeType.value}-${initialPlatform.value}`;
		}
		// 根据路由设置默认平台
		// nextTick(() => {
		// 	//handleTabsChange(typeTabs.value[activeType.value])
		// 	const _index = getSwiperIndexByType(activeType.value);
		// 	goToSlidePage(_index, 0);
		// });
	}

	// 第一次加载页面,设置当前加载显示页面
	setCurrentShowPageData(activeType.value, activePlatform.value[activeType.value]);
	// 新增路由参数补全
	fixUrlParams();
};

// const refreshFun = async () => {
// 	// 刷新游戏数据
// 	fetch(settings.value.third_game_manage + '?' + new Date().getTime()).then((homeGameDataRes: any) => {
// 		if (!homeGameDataRes.ok) return showToast.fail('third_game_manage_err');
// 		homeGameDataRes
// 			.json()
// 			.then((homeGameData: any) => {
// 				Page(pinia).setHomePageGameData(homeGameData);
// 			})
// 			.finally(() => {
// 				const timer1 = setTimeout(() => {
// 					// 保证至少有600ms的加载效果
// 					clearTimeout(timer1);
// 					refresh.value = false;
// 				}, 600);
// 			});
// 	});
// };

const getSwiperIndexByType = (typeId) => {
	const _index = typeTabs.value.findIndex((a: any) => a.id == typeId);
	return _index;
};

const categoryPageSwiper = ref(null);
const swiperInstance = ref(null);
const onSwiperInit = (swiper: any) => {
	swiperInstance.value = swiper; // 保存 Swiper 实例
	nextTick(() => {
		swiper.slideTo(getSwiperIndexByType(activeType.value), 0);
	})
};

const scrollPosition = ref(0);
let ticking = false;
const currentScrollContainerId = ref('');
let currentScrollContainer = null;
const handleScroll = (gameTypeId) => {
	if (currentScrollContainerId.value !== `pane-box${gameTypeId}`) {
		currentScrollContainerId.value = `pane-box${gameTypeId}`;
		currentScrollContainer = document.getElementById(`pane-box${gameTypeId}`)
	}
	const container = document.getElementById(`pane-box${gameTypeId}`);
	if (currentScrollContainer) {
		sessionStorage.setItem('categoryScrollPosition', currentScrollContainer.scrollTop);
	}
};

const actived = ref(false)
onActivated(() => {
	fixUrlParams();
	setTimeout(() => {
		actived.value = true
		enablePullToRefresh()
		// 记录滚动位置
		setTimeout(() => {
			if (currentScrollContainerId.value) {
				const position = sessionStorage.getItem('categoryScrollPosition');
				const currentScrollContainer = document.getElementById(currentScrollContainerId.value)
				currentScrollContainer?.scrollTo(0, position);
			}
		}, 50)
	}, 0)
});
onDeactivated(() => {
	actived.value = false
	disablePullToRefresh()
})

onMounted(() => {
	if (homeGameData.value?.length) {
		handleGamesData(homeGameData.value);
	}
});

onBeforeUnmount(() => {
	if (loadTimer) clearTimeout(loadTimer);
});

if (window.matchMedia("(display-mode: standalone)").matches) {
  	nextTick(() => {
		document.getElementById('categoryPage').style.setProperty('--p-height', `220px`);
	})
}

</script>
<style lang="scss" scoped>
.categoryPage {
	padding: 92px 0 20px;
	padding-top: calc(90px + env(safe-area-inset-top));

	--p-height: 150px;
	position: relative;
	height: calc(var(--vh, 1vh) * 100);
	padding-bottom: env(safe-area-inset-bottom); 
	overscroll-behavior: contain;
	.category_page_swiper {
		// margin-top: 5px;
		width: 100%;
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.category_main {
		width: 100vw;
	}

	.game_loading_cover {
		position: fixed;
		height: 100%;
		width: calc(100% - 30px);
		padding-left: 72px;
		display: flex;
		align-items: center;
		justify-content: center;

		:deep(.loading-main) {
			height: unset;
			padding-left: 70px;
			background: transparent;
		}
	}
	.category_content {
		width: 100vw;
	}	

	.category_top {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;
		background-image: url(/imgs/home/public_bg.webp);
		background-size: 80% auto;
		overflow: hidden;
		transition: all 1.4s;
		padding-top: calc(48px + env(safe-area-inset-top));

		.home_header {
			position: absolute;
			z-index: 10;
			top: env(safe-area-inset-top);
		}
	}

	.category_container {
		height: calc(var(--vh) * 100 - var(--p-height));
		overflow-y: auto;
		padding: 0 15px;
		position: relative;
		transform: none;
		// border: 1px solid #f00;
		z-index: 1;
		scroll-behavior: unset;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}

		// 0% { opacity: 0; transform: translateX(20px); }
		// 100% { opacity: 1; transform: translateX(0); }
	}

	.game_list {
		padding-left: 74px;
		// padding-bottom: 20px;
		display: flex;
		flex-wrap: wrap;
		.virtualList {
			width: 100%;
			height: calc(var(--vh) * 100 - var(--p-height)) !important;
		}
		&.loading {
			opacity: 0;
		}

		&.fadeIn {
			animation: fadeIn 0.5s ease-out forwards;
		}

		.game_platform {
			margin-bottom: 8px;

			.platform_logo {
				height: 108px;
				position: absolute;
				right: 10px;
				bottom: 0;
			}

			.item_bg {
				display: flex;
				background: url(/imgs/category/video.webp) no-repeat;
				background-size: 100% 100%;
				width: 273px;
				height: 120px;
				position: relative;
				user-select: none;

				.fav {
					position: absolute;
					right: 10px;
					top: 10px;
				}

				>div {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					span {
						color: #fff;
						font-size: 14px;
						font-weight: 600;
						user-select: none;
					}
				}

				.logo_h5 {
					// width: 92px;
					height: 33px;
				}

				.game_hot {
					// width: 38px;
					height: 30px;
					position: absolute;
					padding: 0 8px 0 8px;
					left: 1px;
					top: 1px;
					z-index: 9;
					// background: url(/imgs/home/is_hot.png) no-repeat;
					background-size: 100% 100%;
					display: flex;
					align-items: center;
					transform-origin: 0 0;

					.game_hot_icon {
						width: 8px;
						height: 10px;
						margin: 0 2px;
					}

					span {
						color: #ffffff;
						font-size: 8px;
					}
				}
			}
		}

		.game_empty {
			height: calc(70 * var(--vh));
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		/* 虚拟列表容器 */
		:deep(.use-virtual-list) {
			width: calc(3 * 86px + 2 * 6px); // 总宽度 = 3列 + 2个间距
			margin-right: -6px; // 补偿最后一列的右边距
		}

		.row {
			display: grid;
			grid-template-columns: repeat(3, 86px);
			gap: 6px;
			margin-bottom: 6px;
		}

		.game_item {
			width: 86px;
			height: 114px;
			margin-right: 6px;
			margin-bottom: 6px;
			position: relative;
		}

		:nth-child(3n) {
			margin-right: 0;
		}

		:deep(.cover1) {
			width: 86px;
			height: 86px;
		}

		:deep(.title) {
			margin: 0 auto;
			font-size: 12px;
			line-height: 12px;
		}
	}

	.platform-wrap {
		position: fixed;
		left: 15px;
		top: 0;
		z-index: 100;
		overflow-y: auto;
		overflow-x: hidden;
		height: calc(var(--vh) * 100 - var(--p-height));

		.platform-item {
			position: relative;
			background: #282747;
			border-radius: 8px;
			min-height: 42px;
			width: 68px;
			margin-bottom: 6px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 12px;
			font-weight: 400;
			line-height: 14px;
			text-align: center;
			padding: 3px 0 0px 0;

			.platform_icon {
				:deep(img) {
					height: 24px;
					display: block;
					margin: 0 auto 1px;
				}
			}

			&.isHotBlock {
				min-height: 54px;
				font-size: 14px;
				padding: 3px 0;

				:deep(img) {
					height: 20px;
					display: block;
					margin: 3px auto 6px;
				}

				:deep(.img_text) {
					line-height: 14px;
					padding-bottom: 1px;
				}
			}

			&.active {
				background: linear-gradient(180deg, #5567ff 0%, #9e1eff 100%);
				box-shadow: 0.5px 0.5px 1px 0px #9b9eff inset;
				color: #fff;
			}

			.small {
				:deep(.img_text) {
					transform: scale(0.8);
				}
			}
		}
	}
}
</style>
